/* =========================================================
 * CheckCode.js v1.0.0 作者: 唐玉龙   2015-08-05
 *	封装验证码
 *	使用方法：见同目录下checkCode.html文件
 * =========================================================
 *修改记录：
 *
 *
 *
 *
 *
 * ========================================================= */
(function(){
	var randstr = function(length){
		var key = {

			str : [
				 1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
			],

			randint : function(n,m){
				var c = m-n+1;
				var num = Math.random() * c + n;
				return	Math.floor(num);
			},

			randStr : function(){
				var _this = this;
				var leng = _this.str.length - 1;
				var randkey = _this.randint(0, leng);
				return _this.str[randkey];
			},

			create : function(len){
				var _this = this;
				var l = len || 10;
				var str = '';

				for(var i = 0 ; i<l ; i++){
					str += _this.randStr();
				}

				return str;
			}

		};

		length = length ? length : 10;

		return key.create(length);
	};

	var randint = function(n,m){
		var c = m-n+1;
		var num = Math.random() * c + n;
		return	Math.floor(num);
	};

	var vCode = function(dom, options){
		this.codeDoms = [];
		this.lineDoms = [];
		this.initOptions(options);
		this.dom = dom;
		this.init();
		this.addEvent();
		this.update();
		this.mask();
	};

	vCode.prototype.init = function(){
		this.dom.style.position = "relative";
		this.dom.style.overflow = "hidden";
		this.dom.style.cursor = "pointer";
		this.dom.title = "点击更换验证码";
		this.dom.style.background = this.options.bgColor;
		this.dom.style.height=this.options.boxHeight+"px";
		this.dom.style.width=this.options.boxWidth+"px";
		this.dom.style.border=this.options.boxBorder;
		this.dom.style.display=this.options.boxDisplay;
		this.dom.style.verticalAlign=this.options.boxVerticalAlign;
		this.w = this.dom.clientWidth;
		this.h = this.dom.clientHeight;
		this.uW = this.w / this.options.len;
	};

	vCode.prototype.mask = function(){
		var dom = document.createElement("div");
		dom.style.cssText = [
			"width: 100%",
			"height: 100%",
			"left: 0",
			"top: 0",
			"position: absolute",
			"cursor: pointer",
			"z-index: 9999999"
		].join(";");

		dom.title = "点击更换验证码";

		this.dom.appendChild(dom);
	};

	vCode.prototype.addEvent = function(){
		var _this = this;
		$(_this.dom).bind("click", function(){
			_this.update.call(_this);
		});
		/*_this.dom.addEventListener("click", function(){
			_this.update.call(_this);
		});*/
$(_this.dom).bind("keyup", function(){
			_this.update.call(_this);
		});
		/*_this.dom.addEventListener("keyup", function(event){
			_this.update.call(_this);
		});*/
	};

	vCode.prototype.initOptions = function(options){

		var f = function(){
			this.len = 14;//验证码个数
			this.isUpper=false;//是否区分大小写
			this.fontSizeMin = 20;//最小字号
			this.fontSizeMax = 30;//最大字号
			this.colors = ["#000","#000","#000","#000",];//字体颜色
			this.bgColor = "#FFF";//背景色
			this.fonts = ["Times New Roman","Georgia","Serif","sans-serif","arial","tahoma","Hiragino Sans GB"];//字体
			this.lines = 4;//直线条数
			this.lineColors = ["#888888","#FF7744","#888800","#008888"];//直线颜色

			this.lineHeightMin = 1;//直线最小高度
			this.lineHeightMax = 3;//直线最大高度
			this.lineWidthMin = 1;//直线最小宽度
			this.lineWidthMax = 60;//直线最大宽度

			this.boxHeight=30;//区域默认高度
			this.boxWidth=80;//区域默认宽度
			this.boxBorder="1px solid #ccc";//区域默认边框宽度
			this.boxDisplay="inline-block";//不换行
			this.boxVerticalAlign="middle";//对其文本框
		};

		this.options = new f();

		if(typeof options === "object"){
			for(i in options){
				this.options[i] = options[i];
			}
		}
	};

	vCode.prototype.update = function(){
		for(var i=0; i<this.codeDoms.length; i++){
			this.dom.removeChild(this.codeDoms[i]);
		}
		for(var i=0; i<this.lineDoms.length; i++){
			this.dom.removeChild(this.lineDoms[i]);
		}
		this.createCode();
		this.draw();
	};

	vCode.prototype.createCode = function(){
		this.code = randstr(this.options.len);
	};

	vCode.prototype.verify = function(code){
		if(this.options.isUpper){
			return this.code === code;
		}else{
			return this.code.toUpperCase() === code.toUpperCase();
		}
	};

	vCode.prototype.draw = function(){
		this.codeDoms = [];
		for(var i=0; i<this.code.length; i++){
			this.codeDoms.push(this.drawCode(this.code.substr(i,1), i));
		}
		this.drawLines();
	};

	vCode.prototype.drawCode = function(code, index){//画验证码
		var dom = document.createElement("span");

		dom.style.cssText = [
			"font-size:" + randint(this.options.fontSizeMin, this.options.fontSizeMax) + "px",
			"color:" + this.options.colors[randint(0,  this.options.colors.length - 1)],
			"position: absolute",
			"left:" + randint(this.uW * index, this.uW * index + this.uW - 7*index) + "px",
			"top:" + randint(0, this.h - 30) + "px",
			"transform:rotate(" + randint(-30, 30) + "deg)",
			"-ms-transform:rotate(" + randint(-30, 30) + "deg)",
			"-moz-transform:rotate(" + randint(-30, 30) + "deg)",
			"-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
			"-o-transform:rotate(" + randint(-30, 30) + "deg)",
			"font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],
			"font-weight:" + randint(400, 900)
		].join(";");

		dom.innerHTML = code;
		this.dom.appendChild(dom);

		return dom;
	};

	vCode.prototype.drawLines = function(){//画线
		this.lineDoms = [];
		for(var i=0; i<this.options.lines; i++){
			var dom = document.createElement("div");

			dom.style.cssText = [
				"position: absolute",
				"opacity: " + randint(3, 8) / 10,
				"width:" + randint(this.options.lineWidthMin, this.options.lineWidthMax) + "px",
				"height:" + randint(this.options.lineHeightMin, this.options.lineHeightMax) + "px",
				"background: " + this.options.lineColors[randint(0, this.options.lineColors.length - 1)],
				"left:" + randint(0, this.w - 20) + "px",
				"top:" + randint(0, this.h) + "px",
				"transform:rotate(" + randint(-30, 30) + "deg)",
				"-ms-transform:rotate(" + randint(-30, 30) + "deg)",
				"-moz-transform:rotate(" + randint(-30, 30) + "deg)",
				"-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
				"-o-transform:rotate(" + randint(-30, 30) + "deg)",
				"font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],
				"font-weight:" + randint(400, 900)
			].join(";");
			this.dom.appendChild(dom);

			this.lineDoms.push(dom);
		}
	};

	this.vCode = vCode;

}).call(this);